<template>
  <div class="userFilmDetail_wrapper">
    <!-- banner Start -->
    <section class="top_banner">
     <img src="@/assets/images/logo.png" alt="logo">
    </section>
    <!-- banner End -->
    <!-- userFilmDetail Start -->
    <section class="userFilmDetail_content p_8 ">
      <!-- userInfo Start -->
      <section class="userInfo">
          <div class="user-img">
              <img src="@/assets/images/head.png" alt="头像">
          </div>
          <div class="user-msg">
              <p class="info-msg"><span>{{filmMsg.TC_PT_NAME}}</span><span>{{filmMsg.TC_PT_GENDER == 1?'男':'女'}}</span><span>{{filmMsg.TC_PT_AGE}}岁</span></p>
              <div class="inspect-msg">
                  <p><span>检查号</span><span>{{filmMsg.TC_ST_GRP_NO}}</span></p>
                  <p><span>检查时间</span><span>{{filmMsg.TC_ST_CHK_TIME}}</span></p>
              </div>
              <div class="inspect-msg">
                  <p><span>检查类型</span><span>{{filmMsg.TC_ST_TYPE}}</span></p>
                  <p><span>检查部位</span><span>{{filmMsg.TC_ST_BODY}}</span></p>
              </div>
          </div>
      </section>
      <!-- userInfo End -->
      <!-- btns wrapper Start -->
      <section class="btns_wrapper font_28 c_fff">
          <div class="btns-types">
                <div @click="goToImgAndText(params)">
                    <img src="@/assets/images/tw.png" alt="pic">
                    <span>图文报告</span>
                </div>
                <div @click="goToElectronicFilm(params)">
                    <img src="@/assets/images/jp.png" alt="pic">
                    <span>电子胶片</span>
                </div>
                <div @click="goToImageBrowsing(params)">
                    <img src="@/assets/images/yx.png" alt="pic">
                    <span>影像浏览</span>
                </div>
          </div>
          <!-- 验证码 and 网址 -->
            <div class="pc-code">
                <div class="pc">{{filmMsg.securityCode}}</div>
                <div class="webfilm">www.powerfilmer.com </div>
            </div>
      </section>
      <!-- btns wrapper End -->
       <!-- userInfo Start -->
      <section class="info-content b_d1e6fe">
        <div class="userInfo_title">
          影像所见
        </div>
        <div class="userInfo_content silhouette">
          {{filmMsg.TC_RP_FINDINGS}}
        </div>
      </section>
      <!-- userInfo End -->
       <!-- userInfo Start -->
      <section class="info-content b_d1e6fe">
        <div class="userInfo_title">
          诊断结论
        </div>
        <div class="userInfo_content conclusion">
          {{filmMsg.TC_RP_INSPECT_CON}}
        </div>
      </section>
       <section >
        <div @click="goToHistoryPage(params)" class="history_btn b_7fb553 c_fff font_25">历史检查记录</div>
      </section>
      <!-- userInfo End -->
    </section>
    <!-- userFilmDetail End -->
  </div>
</template>

<script>
import { HttpService } from "../../provides/index";

export default {
  components: {},
  props: {},
  data() {
    return {
      params: {},
      filmMsg: {}
    };
  },
  watch: {},
  computed: {},
  methods: {
    goToImgAndText(params) {
      this.$router.push({ path: "/ImgAndTextApt/"+params.studyid+'/'+params.hospcode+'/'+params.patientid + '/' + params.hospdomain});
    },
    goToElectronicFilm(params) {
      this.$router.push({ path: "/ElectronicFilmApt/"+params.studyid+'/'+params.hospcode+'/'+params.patientid + '/' + params.hospdomain});
    },
    goToImageBrowsing(params) {
      this.$router.push({ path: "/ImageBrowsingApt/"+params.studyid+'/'+params.hospcode+'/'+params.patientid + '/' + params.hospdomain});
    },
    goToHistoryPage(params) {
      this.$router.push({ path: "/HistoryPageApt/"+params.studyid+'/'+params.hospcode+'/'+params.patientid + '/' + params.hospdomain});
    }
  },
  created() {},
  mounted() {
    // this.filmId = this.$route.params.filmId;
    this.params = {
      patientid: this.$route.params.patientid,
      studyid: this.$route.params.studyid,
      hospcode: this.$route.params.hospcode,
      hospdomain: this.$route.params.hospdomain,
    };
    HttpService.api({
      url: "/userFilmDetail",
      params: this.params,
      headers: {}
    })
      .then(res => {
        console.log(this)
        this.filmMsg = res.result || {};
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang="scss" scoped>
.userFilmDetail_wrapper_wrapper {
}
.top_banner {
  height: pxToRem(55);
  background: #469feb;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: pxToRem(174);
    height: pxToRem(32);
  }
}
.userFilmDetail_content {
  padding: pxToRem(10) pxToRem(20);
  .userInfo {
    padding: pxToRem(22) pxToRem(43) pxToRem(15);
    display: flex;
    justify-content: flex-start;
    font-size: pxToRem(15);
    letter-spacing: 0px;
    color: #737373;
    .user-img {
      height: pxToRem(76);
      width: pxToRem(68);
      border: pxToRem(1) solid #b8b8b8;
      border-radius: pxToRem(3);
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
      }
    }
    .user-msg {
      padding: pxToRem(2) pxToRem(18);
      .info-msg {
        span {
          margin-right: pxToRem(30);
        }
      }
      .inspect-msg:nth-of-type(1) {
        margin-top: pxToRem(12);
      }
      .inspect-msg:nth-of-type(2) {
        margin-top: pxToRem(5);
      }
      .inspect-msg {
        display: flex;
        justify-content: flex-start;
        p {
          width: pxToRem(200);
          font-size: pxToRem(11);
          letter-spacing: 0px;
          color: #737373;
          span:nth-child(1) {
            display: inline-block;
            width: pxToRem(65);
          }
        }
      }
    }
  }
  .btns_wrapper {
    margin: 0;
    display: flex;
    justify-content: space-between;
    text-align: center;
    .btns-types {
      width: pxToRem(602);
      box-sizing: border-box;
      padding: 0 0 0 pxToRem(132);
      display: flex;
      justify-content: space-between;
      text-align: center;
      > div {
        border-radius: pxToRem(5);
        width: pxToRem(112);
        height: pxToRem(50);
        background: #7fb553;
        border: solid pxToRem(1) #5b8637;
        // border: 1px solid green;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
          font-size: pxToRem(10);
          letter-spacing: 0px;
          display: block;
          width: pxToRem(112);
          text-align: center;
          margin-top: pxToRem(2);
        }
        &:nth-of-type(1) {
          img {
            width: pxToRem(26);
            height: pxToRem(26);
          }
        }
        &:nth-of-type(2) {
          img {
            width: pxToRem(32);
            height: pxToRem(25);
          }
        }
        &:nth-of-type(3) {
          img {
            width: pxToRem(24);
            height: pxToRem(26);
          }
        }
      }
    }

    .pc-code {
      padding: 0;
      width: pxToRem(144);
      height: pxToRem(50);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-right: pxToRem(32);
      .pc {
        font-size: pxToRem(15);
        letter-spacing: 0px;
        color: #7fb553;
        font-weight: 700;
      }
      .webfilm {
        font-size: pxToRem(9);
        letter-spacing: 0px;
        color: #737373;
      }
    }
  }

  .info-content {
    font-size: pxToRem(12);
    color: #737373;
    border-radius: pxToRem(5);
    border: solid pxToRem(1) #c6dff4;
    margin-top: pxToRem(10);
    .userInfo_title {
      height: pxToRem(32);
      line-height: pxToRem(36);
      padding-left: pxToRem(18);
    }
    .userInfo_content {
      padding: 0 pxToRem(13) pxToRem(10) pxToRem(32);
      line-height: pxToRem(22);
      //   height: pxToRem(160);
    }
    .silhouette {
      min-height: pxToRem(160);
    }
    .conclusion {
      min-height: pxToRem(96);
    }
  }
}

.history_btn {
  border-radius: pxToRem(5);
  width: pxToRem(174);
  height: pxToRem(29);
  margin: 0 auto;
  line-height: pxToRem(30);
  text-align: center;
  margin-top: pxToRem(82);
  font-size: pxToRem(10);
}
</style>